import {  select } from 'd3-selection'
import './index.scss'
function defaultLabel (d) {
    return d.data.name
}

export function flameGraphTip () {
    const rootElement = select('body')
    let tooltip;
    // Function to get HTML content from data.
    let html = defaultLabel
    // Function to get text content from data.
    let text = defaultLabel
    // Whether to use d3's .html() to set content, otherwise use .text().
    let contentIsHTML = false

    function tip () {

      tooltip = rootElement
      .append('div')
      .style('display', 'none')
      .style('position', 'absolute')
      .style('opacity', 0)
      .style('pointer-events', 'none')
      .attr('class', 'custom-flame-graph-tooltip')
    }

    tip.show = function (d) {
      console.log(event, 'event');
      console.log(tooltip, 'tooltip', d);
      const {maxValue, startPosition} = d.data
    //   const left =  value >= maxDepth / 2 ?
        tooltip
            ?.style('display', 'block')
            .style('left', (event  )?.pageX + 5 + 'px')
            .style('top', (event )?.pageY + 5 + 'px')
            // .transition()
            // .duration(200)
            .style('opacity', 1)
            .style('pointer-events', 'all');
        if(startPosition >= (maxValue / 2)) {
            tooltip.style('transform', ' translateX(-100%)')
        } else {
            tooltip.style('transform', ' translateX(0px)')
        }
        if (contentIsHTML && tooltip) {
            tooltip.html(html(d))
        } else {
            tooltip.text(text(d))
        }

        return tip
    }

    tip.hide = function () {
        tooltip
            .style('display', 'none')
            // .transition()
            // .duration(200)
            .style('opacity', 0)
            .style('pointer-events', 'none')

        return tip
    }

    /**
     * Gets/sets a function converting the d3 data into the tooltip's textContent.
     *
     * Cannot be combined with tip.html().
     */
    tip.text = function (_) {
        if (!arguments.length) return text
        text = _
        contentIsHTML = false
        return tip
    }

    /**
     * Gets/sets a function converting the d3 data into the tooltip's innerHTML.
     *
     * Cannot be combined with tip.text().
     *
     * @deprecated prefer tip.text().
     */
    tip.html = function (_) {
        if (!arguments.length) return html
        html = _
        contentIsHTML = true
        return tip
    }

    tip.destroy = function () {
        tooltip.remove()
    }

    return tip
}

export function genTipHtml(d) {
    console.log(d, 'html');
    const {name, value, maxValue} = d.data
    return `<div class="custom-flame-graph-tooltip-main">
        <div class="custom-flame-graph-tip-title mb4">${name}</div>
        <div class="custom-flame-graph-tip-name mb4">${name}</div>
        <div class="custom-flame-graph-tip-inner">
            <span class="custom-flame-graph-tip-field">用时占比</span>
            <span class="custom-flame-graph-tip-value">${(value / maxValue * 100).toFixed(2) + '%'}</span>
        </div>
    </div>`
}
